import 'package:flutter/material.dart';
import 'package:flutter_fronter_service/model/goods_item_entity.dart';
import 'package:get/get.dart';

import '../api/goodsApi.dart';

class GoodsGridView extends StatefulWidget {
  const GoodsGridView({super.key});

  @override
  _GoodsGridViewState createState() => _GoodsGridViewState();
}

class _GoodsGridViewState extends State<GoodsGridView> {

  late RxList<GoodsItemEntity> goodsList = <GoodsItemEntity>[].obs;

  Future<void> getGoodsList() async {
    var res = await getGoodsApi();
    res["data"].forEach((item)=>goodsList.add(GoodsItemEntity.fromJson(item)));
  }

  @override
  void initState() {
    super.initState();
    getGoodsList();
  }

  @override
  Widget build(BuildContext context) {
    return Obx(() => ListView(
      shrinkWrap: true,
      physics: const NeverScrollableScrollPhysics(),
      children: [
        const SizedBox(height: 10,),
        Center(
          child: Container(
            padding: EdgeInsets.symmetric(vertical: 20.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                // 左侧的图片
                Container(
                  width: 10.0,
                  height: 10.0,
                  margin: EdgeInsets.symmetric(horizontal: 5.0),
                  decoration: const BoxDecoration(
                    image: DecorationImage(
                      image: AssetImage("assets/images/bubble.png"),
                      fit: BoxFit.contain,
                    ),
                  ),
                ),
                // 中间的文字
                const Text(
                  '好物推荐',
                  style: TextStyle(
                    fontSize: 16.0,
                    color: Color(0xFF262626),
                  ),
                ),
                // 右侧的图片
                Container(
                  width: 10.0,
                  height: 10.0,
                  margin: EdgeInsets.symmetric(horizontal: 5.0),
                  decoration: const BoxDecoration(
                    image: DecorationImage(
                      image: AssetImage("assets/images/bubble.png"),
                      fit: BoxFit.contain,
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
        GridView.count(
          shrinkWrap: true,
          physics: const NeverScrollableScrollPhysics(),
          padding: const EdgeInsets.all(10),
          crossAxisCount: 2,
          crossAxisSpacing: 5,
          mainAxisSpacing: 5,
          childAspectRatio: 0.7,
          children: goodsList.map((item) => GoodsGridTile(item: item)).toList(),
        )
      ],
    ));
  }
}

class GoodsGridTile extends StatelessWidget {
  final GoodsItemEntity item;

  const GoodsGridTile({Key? key, required this.item}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        //通过Getx跳转
        Get.toNamed("/goodsDetail",arguments: {"id":item.id});
      },
      child:Container(
        padding: const EdgeInsets.all(10),
        decoration: BoxDecoration(
          color: Colors.white,
          border: Border.all(width: 1, color: Colors.black12),
        ),
        alignment: Alignment.center,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              width: 200,
              height: 150,
              //背景图片
              decoration: BoxDecoration(
                image: DecorationImage(image: NetworkImage(item.picture),fit: BoxFit.cover)
              )
            ),
            const SizedBox(height: 2.5),
            Text(
              item.name,
              style: const TextStyle(fontSize: 10),
            ),
            const SizedBox(height: 2.5),
            Text(
              '￥${item.price.toString()}',
              style: const TextStyle(fontSize: 13,color: Colors.red),
            ),
          ],
        ),
      ) ,
    );
  }
}
